<template>
<el-affix>
<div class="header-box" >
<div class="header-box-content">
	<!-- 左边logo start-->
	<h1 class="logo">
		<img src="@/assets/images/logo.png" alt="logo">
	</h1>
	<!-- 左边logo end-->
	<!-- 右边功能区 start -->
	<ul class="nav">
		<li class="nav-item" id="searchInput">
			<div style="margin-top: 20px">
				<el-input placeholder="请输入课程名称或课程编号" v-model="searchText">
					<template #append>
						搜索
					</template>
				</el-input>
			</div>
		</li>
		<li class="nav-item nav-img">
			<el-dropdown trigger="click">
				<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="photo">
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item style="text-align: center">
							{{name}}
						</el-dropdown-item>
						<el-dropdown-item>
							<i class="el-icon-lock"></i>
							<router-link :to="{path:'/login'}">退出登录</router-link>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</li>
	</ul>
	<!-- 右边功能区 end -->
</div>
</div>
</el-affix>
</template>

<script>
export default {
	name: "LogoHeader"
}
</script>

<style lang="scss" scoped>
.header-box{
	//定义最小宽度
	@media screen and (max-width: 959px){
		width: 959px;
	}
	width: 100%;
	height: 80px;
	line-height: 80px;
	background: #ffffff;
	// 定义flex布局，强制垂直居中
	@mixin columnCenter{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.header-box-content{
		width: 87%;
		margin: 0 auto;
		padding-right:20px ;

		.logo{
			float: left;
			height: 100%;
			line-height: 100%;
			@include columnCenter;
		}
		.nav{
			float: right;
			height: 100%;
			line-height: 100%;
			list-style: none;
			.nav-item{
				height: 100%;
				line-height: 100%;
				float: left;
				margin-left: 20px;
				margin-right: 20px;
			}
			// 屏幕小了隐藏搜索框
			#searchInput{
				@media screen and (max-width: 1339px){
					display: none;
				}
			}
			.nav-item.nav-img{
				img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					vertical-align: middle;
					margin-top: 20px;
				}
			}
		}
	}

}
</style>